<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="m.178hui.com"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/transaction.css?v=1"/>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="main">
    <div class="title">
        <div class="left_return" onClick="javascript :history.back(-1);"><img src="img/lefticon.png"/></div>
    </div>
    <div id="app">
    </div>
    <div class="chart">
        <div class="chartprice"><span>价格趋势</span></div>
        <div id="container"></div>
    </div>
    <div class="chart">
        <div class="chartsale"><span>销量趋势</span></div>
        <div id="container2"></div>
    </div>
</div>
<!-- 引入 highcharts 文件 -->
<script src="js/highcharts.js"></script>
<script>
    $(function () {
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            console.log(r, "11111")
            if (r != null) return decodeURI(r[2]);
            return null; //返回参数值
        }

        //接收URL中的参数proId,pages,pageSize
        var pages = getUrlParam('pages');

        var termporaryName = getUrlParam('termporaryName');
        console.log("d", termporaryName)//获取的状态
/*        var api = "http://localhost:8769/product"*/
        var api ='https://shop.nainaiwang.com/product'
        $.ajax({
            'url': api + "/productOffer/statByCateName",
            'type': 'get',
            'data': {pageNum: pages, pageSize: "20", id: ""},
            'datatype': 'json',
            success: function (res, status) {
                console.log(res)//获取的状态
                var prolist = res.data.list//获取数据的数组
                $.each(prolist, function (idx, val) {
                    var strfour = "";
                    // var attr=""
                    var str = ""
                    var attribute = ""//属性
                    //根据id获取详情数据
                    if (termporaryName == val.cate_name) {
                        var title = "<h3>" + val.cate_name + "</h3>"
                        //判断数据是否大于0
                        if(val.price_diff!=null){
                            if (val.price_diff >=0) {
                                // console.log(prolist)
                                strfour = "<div class='tran_four'><b class='rise'>" + val.current_price + "</b><img src='img/upicon.png'></img></div>"
                            } else if (val.price_diff < 0) {
                                    strfour = "<div class='tran_four'><b class='drop'>" + val.current_price  + "</b><img src='img/downicon.png'></img></div>"
                            }
                        }else{
                                strfour = "<div class='tran_four'><b class='rise'>" + val.current_price + "</b><img src='img/upicon.png'></img></div>"
                        }
                       //属性拼接内容
                        if (val.productAttribute != null) {
                            var attributeList = val.productAttribute.attributes
                            $.each(attributeList, function (proaId, pro) {
                                attribute += "<div class='parameter'><span>"+pro.name+"："+pro.value+"</span></div>"
                            })
                        }
                        //拼接数据列表
                        str += "<div class='tranlist'><div class='tran_top'><div class='tran_text'><b class='tran_name'>"
                            + val.cate_name + "</b></div><div class='tran_sales'>销售量："
                            + val.total_num + val.unit + "</div></div><div class='tran_three'><div class='jy_bt'>交易涨幅对比</div><div class='max_price'>最高价：￥"
                            + val.max_price + "/<span class='unit'>" + val.unit + " </span></div></div><div class='tran_three'>"
                            + strfour + "<div class='min_price'>最低价：￥"
                            + val.min_price + "/<span class='unit'>" + val.unit + "</span></div></div><div class='tran_two'>" + attribute + "</div></div>"
                    }

                    $(".title").append(title)
                    $("#app").append(str);
                });

            }
        })
        var total = [];
        var price = [];
        var dataTime = [];
        //获取图表数据
        $.ajax({
            'url': api + "/ordersell/getOrderListByCateName",
            'type': 'get',
            'data': {pageNum: 1, pageSize: 100, id: "", cateName: termporaryName},
            'datatype': 'json',
            //'contentType':"application/x-www-form-urlencoded;charset=UTF-8",
            success: function (data, status) {
               
                var orderList = data.data.orderList
                 console.log("offerId", orderList)//获取的状态
                if (orderList != "") {
                    $.each(orderList, function (idp, order) {
                        var newData = new Date(order.order_time);//获取的时间
                        var newY = newData.getFullYear();//获取时间的年
                        var newM = newData.getMonth() + 1;//获取时间的月
                        var newD = newData.getDate();//获取时间的日
                        dataTime.push(newY+"/"+newM + "/" + newD)
                        total.push(order.num);//成交量数组
                        price.push(order.price);//成交单价数组
                    })
                    console.log("月:价格" + total)
                    console.log("月s:", price)
                }
                //console.log("折线图",total,price)
                //折线图
                Highcharts.setOptions({
                    chart: {
                        type: 'area',                        //指定图表的类型，默认是折线图（line）
                        spacingTop: 40,
                    },
                    title: {
                        text: ''                 // 标题
                    },
                    xAxis: {
                        categories: dataTime,//x轴数据
                        labels: {
                            style: {
                                fontSize: '14px'  //字体
                            }
                        },
                    },
                    yAxis: {
                        title: {
                            text: ' ',// y 轴标题
                            style: {},
                            align: 'high',
                            offset: 5,
                            rotation: 0,
                            y: -20

                        },
                        labels: {
                            //y: 20, //x轴刻度往下移动20px
                            style: {
                                // color: '#fff',//颜色
                                fontSize: '14px'  //字体
                            }
                        },
                    },
                    credits: {
                        enabled: false
                    },

                });
                var chart1 = Highcharts.chart('container', {
                    series: [{
                        name: '价格趋势',
                        data: price,
                    }]
                })
                var chart2 = Highcharts.chart('container2', {
                    series: [{
                        name: '交易量',
                        data: total,
                        color: "#999"
                    }]
                })

            }
        })
    })

</script>
</body>
</html>
